<template>

    <div class="troch" v-cloak>
  <!-- 发布需求 -->
      <div class="">
        <div class="container main">
          <!-- <div class=""> -->
          <div class="hot_BJ sued">
            <h6>发布需求</h6>
            <div class="row">
              <div class="col-md-3">
                <div class="type_des text-right">
                  <p>选择您需要的类型 <font class="text-danger">*</font></p>
                </div>
              </div>
              <div class="col-md-9">
                <div class="type_btn">
                  <button
                    v-for="(item,index) in type"
                    :class="{'typestyle':types === index}"
                    @click="database(item,index)"
                  >
                    {{ item.value }}
                  </button>
                </div>
              </div>
            </div>
            <div class="row suber">
              <div class="col-md-3">
                <div class="type_des text-right">
                  <p>选择您需要的子类型 <font class="text-danger">*</font></p>
                </div>
              </div>
              <div class="col-md-9">
                <div class="type_btn">
                  <button
                    v-for="(item,index) in Subtype"
                    :class="{'typestyle':subtypes === index}"
                    @click="Internet(item,index)"
                  >
                    {{ item.value }}
                  </button>
                </div>
              </div>
            </div>
            <div class="row suber">
              <div class="col-md-3">
                <div class="type_des text-right">
                  <p>一句话需求<font class="text-danger">*</font></p>
                </div>
              </div>
              <div class="col-md-9">
                <div class="type_btn">
                  <textarea name="" id="" cols="90" rows="10"></textarea>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-3">
                <div class="type_des text-right">
                  <p>详细需求<font class="text-danger">*</font></p>
                </div>
              </div>
              <div class="col-md-9">
                <div class="type_btn">
                  <textarea name="" id="" cols="90" rows="10"></textarea>
                </div>
              </div>
            </div>
            <div class="row suber">
              <div class="col-md-3">
                <div class="type_des text-right">
                  <p>您的预算<font class="text-danger">*</font></p>
                </div>
              </div>
              <div class="col-md-7">
                <div class="type_btn">
                  <select name="" id="" class="form-control">
                    <option>5000~1000元</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-3"></div>
              <div class="col-md-7">
                <div class="text-left corporate">
                  <label>
                    <input
                      type="checkbox"
                      @click="showQM"
                      class="cbox"
                      :checked="isCheck"
                      style="width: 20px;height: 20px;vertical-align: -6px;margin-right: 10px;cursor: pointer;"
                    />
                    同意XXXX协议
                  </label>
                </div>
              </div>
            </div>
            <div class="text-center Submission">
              <button
                type="button"
                class="btn btn-primary btn-big"
                :disabled="!isCheck"
              >
                提交
              </button>
            </div>
          </div>
          <!-- </div> -->
        </div>
      </div>

   
    </div>

</template>


<script>
import headlogin from '../../views/localPage/headlogin'
  export default{

  data(){
      return{
    isCheck: false,
    types: 0,//分类
    subtypes: 0,//子类
          
      
    cur: this.$route.query.test,//导航栏的默认光标
    Navigation:false,//服务分类的隐藏显示
    navD: [
      { id: 1, zt: "首页" },
      { id: 2, zt: "采集中心" },
      { id: 3, zt: "服务机构" },
      { id: 4, zt: "服务顾问" },
      { id: 5, zt: "关于我们" }
    ],
     type: [
      { id: "1", value: "法律" },
      { id: "2", value: "法律" },
      { id: "3", value: "法律" },
      { id: "4", value: "广告" }
    ],
    Subtype: [
      { id: "1", value: "小程序开发" },
      { id: "2", value: "APP开发" },
      { id: "3", value: "手机网站" },
      { id: "4", value: "企业网站" }
    ],
   }
  },

  methods: {
    // 导航栏
    getItme: function(item, index) {
      this.cur = index;
      switch(index)
      {
                  case 0:
             
                  this.$router.push({ path:'/ServiceSupermarket/Home'})
                  break;
                  case 1:
           
                  this.$router.push({ path:'/ServiceSupermarket/GatheringCenter'})
                  break;
                  case 2:
              
                    this.$router.push({ path:'/ServiceSupermarket/ServiceOrganization'})
                  break;
                  case 3:
                  
                    this.$router.push({ path:'/ServiceSupermarket/ServiceConsultant'})
                  break;
                  case 4:
                  
                    this.$router.push({ path:'/ServiceSupermarket/About'})
                  break;
      }
    },
  

  
  // 类型
    database: function(item, index) {
      this.types = index;
    },
    // 子类型
    Internet: function(item, index) {
      this.subtypes = index;
    },
   showQM: function() {
      this.isCheck = !this.isCheck
         
    },
      //写需求
        release_demand(){
            this.$router.push({path:'/ServiceSupermarket/CreateDemand'})    
        },
  },

  computed: {
  },
  components:{headlogin}
  
};

</script>
<style scoped>
.sued{
  padding: 50px 0 0 30px; 
}

.sued h6{
  font-size: 20px;
	font-weight:600;
	letter-spacing: 0px;
	color: #333333;
}
.sued .type_des{
  height: 32px;
  line-height: 32px;
}
.sued .suber{
  margin: 20px 0 60px 0;
}
.sued .type_btn button{
  width: 120px;
	height: 32px;
	background-color: #d7d7d7;
  border-radius: 4px;
  border: none;
  margin-right: 40px;
}
.sued  .type_btn .typestyle{
  background-color: #1575f9;
  color: white 
}
.corporate{
  color: #1575f9;
}
.Submission{
  margin-top: 100px;
  margin-bottom: 30px;
}
.Submission button{
  width: 150px;
}
/* .btn-primary:disabled{
    background-color: #999999;
    border: 1px solid #999999;
} */
 /* .btn-primary:disabled {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
} */
</style>
